<template>
  <div class="login-container">
    <div class="red"><span>123131313</span></div>
    <div class="login-left-container">
      <div class="login-left-container-title">
        智能制造&nbsp;&nbsp;&nbsp;&nbsp;智享未来
      </div>
      <div class="login-left-container-desc">
        智能的数据采集体系,完整的数据汇聚,分析服务体制
      </div>
      <div class="login-left-container-pic"></div>
    </div>
    <div class="login-right-container">
      <div class="login-title">欢迎登录云掌柜管理系统</div>
      <div class="login-bottom-container">
        <a-form :form="form" @submit="handleSubmit">
          <a-form-item class="single-form-container">
            <span class="single-form-title">手机号:</span>
            <a-input
              autocomplete="off"
              class="mobile-input"
              ref="mobile"
              v-decorator="[
                'mobile',
                {
                  rules: [
                    {
                      required: true,
                      pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
                      message: '请输入正确的手机号',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>
          <a-form-item class="single-form-container">
            <span class="single-form-title">验证码:</span>
            <a-input class="verify-code" autocomplete="off" v-decorator="['code', { rules: [{ required: true, message: '请输入验证码' }] }]" />
            <a-button class="verify-code-btn" v-if="issend" @click="sendcode">获取验证码</a-button>
            <a-button class="verify-code-btn" v-if="!issend" disabled type="primary">{{ count }}s后再次发送</a-button>
          </a-form-item>
          <a-form-item class="single-form-container">
            <a-button type="primary" html-type="submit" class="login-btn">登 录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import GLOBAL from '@/api/global_variable';
import Toast from '@/components/toast/Toast';
import api from '@/server/userConfig';
export default {
  name: 'Middle',
  components: {
    Toast,
  },
  data() {
    return {
      ip: GLOBAL.ip,
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),
      count: 60,
      issend: true,
    };
  },
  methods: {
    // 点击登录
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields(async (err, values) => {
        if (err) {
          this.$message.warning('请输入正确的手机号和验证码');
        }
        if (!err) {
          // 均输入后的操作，用手机号和验证码登录
          const res = await api.reqLogin({
            phoneNum: values.mobile,
            code: values.code,
          });
          const state = res.status;
          if (state !== 200) {
            this.$message.warning('手机号或验证码不正确');
            return;
          } else if (state === 200) {
            // 登录成功，需要存缓存
            localStorage.setItem('phone', values.mobile);
            localStorage.setItem('tags', JSON.stringify(['车床', '铣床', '磨床', '五轴']));

            // 判断user是否在数据库中
            const userInfo = await api.getRoleId({
              phoneNumber: values.mobile,
            });

            if (userInfo.MsgCode !== 0) {
              return;
            } else {
              localStorage.setItem('userInfo', JSON.stringify(userInfo.Data));
              // 同时实现跳转
              this.$router.push('/index');
            }
          }
        }
      });
    },
    // 发短信获取验证码
    async sendcode() {
      const mobile = this.$refs.mobile.value;
      const res = await api.reqVerifyCode({ phoneNum: mobile });
      const state = res.data.state;
      if (state !== '000000') {
        this.$message.warning('请输入正确的手机号码');
        this.issend = true;
        return;
      } else if (state === '000000') {
        this.$message.success('获取验证码成功');
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.issend = false;
          //这里可以插入$axios调用后台接口
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.issend = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      }
    },
  },
};
</script>

<style scoped="scoped">
/* .red {
  color: red;
  font-size: 24px;
} */
@import './style.css';
</style>
